const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin'); // 清除文件缓存插件

module.exports = {

    entry: './src/app.js',

    /*
        yarn run dev :
        在对输出路径进行处理，对打包后的资源进行分类之后，
        我们可以在路径前加上assets/把资源放在指定文件夹，同
        时在publicPath配置'./'，保证资源打包之后可以正常引入。
    */

    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'assets/js/main.js', // 指定js文件输出路径
        // 资源基础路径,index.html中加载的资源都会以这个路径为基础
        publicPath: './' //./assets/js/main.js
    },

    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html', // 指定index.html文件输出路径
            template: 'src/index.html'
        }),
        // 清除dist
        new CleanWebpackPlugin(['dist'])
    ],

    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                    {
                        loader: 'babel-loader'
                    }
                ],
                exclude: [ path.resolve(__dirname, 'node_modules')]
            },
            // 处理 css文件中出现的 url, 会自动帮你引入里面要引入的模块
            // '[path]-[name]-[local]-[hash:base64:6]'
            {
                test: /\.css$/,
                use: [
                    'style-loader' ,
                    {
                        loader: 'css-loader',
                        options: {
                            module: true,
                            localIdentName: '[name]-[local]_[hash:base64:6]'
                        }
                    }
                ],
                exclude: [
                    path.resolve(__dirname, 'node_modules'),
                    path.resolve(__dirname, 'src/common')
                ]
            },
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ],
                include: [
                    path.resolve(__dirname, 'node_modules'),
                    path.resolve(__dirname, 'src/common')
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader' ,
                    {
                        loader: 'css-loader',
                        options: {
                            module: true,
                            localIdentName: '[name]-[local]_[hash:base64:6]'
                        }
                    },
                    'sass-loader'
                ],
                exclude: [
                    path.resolve(__dirname, 'node_modules'),
                    path.resolve(__dirname, 'src/common')
                ]
            },
            {
                test: /\.scss$/,
                use: [ 'style-loader', 'css-loader', 'sass-loader' ],
                include: [
                    path.resolve(__dirname, 'node_modules'),
                    path.resolve(__dirname, 'src/common')
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader' ,
                    {
                        loader: 'css-loader',
                        options: {
                            module: true,
                            localIdentName: '[name]-[local]_[hash:base64:6]'
                        }
                    },
                    'less-loader'
                ],
                exclude: [
                    path.resolve(__dirname, 'node_modules'),
                    path.resolve(__dirname, 'src/common')
                ]
            },
            {
                test: /\.less$/,
                use: [ 'style-loader', 'css-loader', 'less-loader' ],
                include: [
                    path.resolve(__dirname, 'node_modules'),
                    path.resolve(__dirname, 'src/common')
                ]
            },

            // file-loader:
            //     1. 把你的资源移动到输出目录
            //     2. 返回最终引入资源的 url
            {
                test: /\.(jpg|png|gif|jpeg)$/,
                use: [ {
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                        // 图片输出路
                        name: 'assets/img/[name]-[hash].[ext]'
                    }
                } ]
            },
            {
                test: /\.(ttf|eot|woff|woff2|svg)$/,
                use: [ 
                    {
                        loader: 'file-loader',
                        options: {
                            // 字体输出路径
                            name: 'assets/fonts/[name]-[hash].[ext]' 
                        }
                    }
                ]
            }
        ]
    },
    /*
        yarn run server
        当我们使用yarn run server命令时，webpack打包之后的资源从
        内存中读取(webpack output is served from /),默认是相对于/
        这个去读取资源，当我们在上面设置了publicPath: './'，路径
        就会变成(webpack output is served from /./),这样就会导致
        找不到要访问的资源，所以我们需要在devServer中添加publicPath: '/'
    */
    devServer: {
        open: true,
        port: 9000,
        // 服务器打包之后的输出路径
        publicPath: '/'
    }
};
